<template>
	<view>
		<!-- 轮播 -->
		<view class="swiper">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(item,i) in swiperList" :key="i">
					<image :src="item.imgPath" alt="">
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperList: [{
				  imgPath: '../../static/find/bannar.png'
				}, {
				  imgPath: '../../static/find/bannar.png'
				}],
			}
		},
		onShow() {
			this.getBanner(),
			console.log("onshow")
		},
		methods: {
			getBanner() {
				uni.request({
					url:'http://139.196.42.209:5005/banner',
					method:'GET',
					success(res) {
						console.log(res)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.swiper {
	  position: relative;
	
	  swiper {
	    height: 330rpx;
	    border-radius: 16rpx;
	    overflow: hidden;
	
	    .swiper-item,
	    image {
	      width: 100%;
	      height: 100%;
	    }
	  }
	
	  .dots {
	    height: 20rpx;
	    display: flex;
	    flex-direction: row;
	    position: absolute;
	    right: 24rpx;
	    bottom: 18rpx;
	    z-index: 9999999;
	
	    .dot {
	      width: 10rpx;
	      height: 10rpx;
	      border-radius: 50%;
	      margin-right: 8rpx;
	      background-color: #d6d6d6;
	    }
	
	    .active {
	      width: 20rpx;
	      height: 10rpx;
	      border-radius: 14rpx;
	      background: #ffffff;
	    }
	  }
	}
</style>
